/*
 * @Author: leo
 * @Date: 2020-03-18
 * @Description 全局CLI配置，配置详情：https://cli.vuejs.org/config/#global-cli-config
 */

const path = require('path');
const resolve = (dir) => path.join(__dirname, dir);
const IS_PROD = ['production'].includes(process.env.NODE_ENV);

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
  .BundleAnalyzerPlugin;

module.exports = {
  chainWebpack: (config) => {
    // 修复 HMR(热更新)失效
    config.resolve.symlinks(true);

    // 添加别名
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('@', resolve('src'))
      .set('@images', resolve('src/assets/images'))
      .set('@less', resolve('src/assets/less'))


    // 压缩图片
    if (IS_PROD) {
      config.module
        .rule('images')
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
          mozjpeg: { progressive: true, quality: 65 },
          optipng: { enabled: false },
          pngquant: { quality: [0.65, 0.9], speed: 4 },
          gifsicle: { interlaced: false },
          // webp: { quality: 75 }
        });

      config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
        {
          analyzerMode: 'static',
        },
      ]);
    }

    // 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖
    const cdn = {
      // 第三方cdn css文件
      css: ['https://at.alicdn.com/t/font_875823_d39d4m4alhe.css'],
      // 第三方cdn js文件
      js: [
        'https://webapi.amap.com/maps?v=1.4.10&key=4889dd4f9abd9d6ca975201b87efdd52&plugin=AMap.TruckDriving',
        'https://webapi.amap.com/ui/1.0/main.js?v=1.0.11',
      ],
    };

    // 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中
    config.plugin('html').tap((args) => {
      // html中添加cdn
      args[0].cdn = cdn;
      return args;
    });
  },
  devServer: {
    /**
     * 这可以通过中的devServer.proxy选项进行配置vue.config.js。
     */
    proxy: {
      '/api': {
        target: 'http://192.168.168.113:9083', // 内网地址
        // ws: false,
        changeOrigin: true,
      },
    },
  },

  productionSourceMap: !IS_PROD, // 生产环境的 source map

  configureWebpack: (config) => {
    // 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖
    // config.externals = {
    //   vue: "Vue",
    //   "element-ui": "ELEMENT",
    //   "vue-router": "VueRouter",
    //   vuex: "Vuex",
    //   axios: "axios"
    // };

    // ParallelUglifyPlugin 用来对js文件进行压缩，UglifyJsPlugin是单线程的
    if (IS_PROD) {
      const plugins = [];
      plugins.push(
        new ParallelUglifyPlugin({
          uglifyJS: {
            output: {
              /*
                      是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，
                      可以设置为false
                      */
              beautify: false,
              /*
                      是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为false
                      */
              comments: false,
            },
            compress: {
              /*
                        是否在UglifyJS删除没有用到的代码时输出警告信息，默认为输出，可以设置为false关闭这些作用
                        不大的警告
                        */
              warnings: false,

              /*
                        是否删除代码中所有的console语句，默认为不删除，开启后，会删除所有的console语句
                        */
              drop_console: true,

              /*
                        是否内嵌虽然已经定义了，但是只用到一次的变量，比如将 var x = 1; y = x, 转换成 y = 5, 默认为不
                        转换，为了达到更好的压缩效果，可以设置为false
                        */
              collapse_vars: true,

              /*
                        是否提取出现了多次但是没有定义成变量去引用的静态值，比如将 x = 'xxx'; y = 'xxx'  转换成
                        var a = 'xxxx'; x = a; y = a; 默认为不转换，为了达到更好的压缩效果，可以设置为false
                        */
              reduce_vars: true,
            },
          },
        }),
      );
      config.plugins = [...config.plugins, ...plugins];
    }
  },
};
